const { defineConfig } = require('@vue/cli-service')
const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const path = require('path');
const options = {
  antDir: path.join(__dirname, "./node_modules/ant-design-vue"), //antd包位置
  stylesDir: path.join(__dirname, "./src/styles/theme"), //主题文件所在文件夹
  varFile: path.join(__dirname, "./src/styles/theme/variables.module.less"), // 自定义默认的主题色
  mainLessFile: path.join(__dirname, "./src/styles/theme/index.less"), // 项目中其他自定义的样式（如果不需要动态修改其他样式，该文件可以为空）
  outputFilePath: path.join(__dirname, "./public/styles/antd.theme.less"), //提取的less文件输出到什么地方
  themeVariables: [
    "@primary-color",
    "@border-color-base",
    "@link-color",
    "@success-color",
    "@warning-color",
    "@error-color",
    "@heading-color",
    "@text-color",
    "@text-color-secondary",
    "@disabled-color",
    "@border-radius-base",
    "@box-shadow-base",

    "@background-color"
  ],
  indexFileName: "./public/index.html", // index.html所在位置
  generateOnce: false // 是否只生成一次（if you don't want to generate color.less on each chnage in code to make build process fast in development mode, assign it true value. But if you have new changes in your styles, you need to re-run your build process npm start.）
};

module.exports = defineConfig({
  transpileDependencies: true,
  //使用包含运行时编译器的 Vue 构建版本,在 Vue 组件中使用 template 选项
  // runtimeCompiler: process.env.NODE_ENV === "development" ? true : false
  runtimeCompiler: true,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            // 'primary-color': '#25b864',
            // 'link-color': '#1DA57A',
            // 'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        }
      },
    },
  },
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        // path.resolve(__dirname, "@/styles/theme/variables.module.less"),
        "@/styles/theme/variables.module.less"
      ]
    }
  },
  chainWebpack(config) {
    //修改htmlWebpackPlugin
    config.plugin('html').tap(args => {
      args[0].title = '~这是你的标题~';
      return args;
    })
  },
  configureWebpack: {
    plugins: [new AntDesignThemePlugin(options)],
    module: {
      rules: [
        // 配置读取 *.md 文件的规则，此种引入方式会导致打包比较大
        // {
        //   test: /\.(md|html)$/,
        //   use: [
        //     { loader: "html-loader" },
        //     { loader: "markdown-loader", options: {} }
        //   ]
        // }
      ]
    }
  }
})